<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;top:0;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            left: 0;top:300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id="btn">开始</button>
</body>
<script src="../jquery.js"></script>
<script>
    $("#btn")[0].onclick = function(){
        // $(".box").animate({
        //     left:500
        // }, 2000, function (){
        //     $(".box").animate({
        //         top:400
        //     }, 2000)
        // })

        // $(".box").animate({
        //     left:500
        // }, 2000)
        // $(".box").animate({
        //     top:400
        // }, 2000)

        
        // $(".box").animate({
        //     left:500
        // }, 2000).animate({
        //     top:400
        // }, 2000)


        // $(".box").animate({
        //     left:500
        // }, 2000).animate({
        //     top:400
        // }, 2000, function(){
        //     $(".box").css({
        //         background:"yellow"
        //     })
        // })

        // $(".box").animate({
        //     left:500
        // }, 2000).animate({
        //     top:400
        // }, 2000).queue(function(){
        //     $(".box").css({
        //         background:"yellow"
        //     })
        // })


        // $(".box").animate({
        //     left:500
        // }, 2000).animate({
        //     top:400
        // }, 2000).queue(function(next){
        //     $(".box").css({
        //         background:"yellow"
        //     })
        //     next();
        // }).animate({
        //     left:0
        // })

    }

    // jq中同一个元素的动画之间是同步的

    // 不同元素之间的动画是异步的

    // jq中同一个元素的动画方法和其他方法之间是异步的





    // jq链式调用的原理：↓↓↓↓

    // var obj = {
    //     a:function(){
    //         console.log("a")
    //         return this
    //     },
    //     b:function(){
    //         console.log("b")
    //         return this
    //     },
    //     c:function(){
    //         console.log("c")
    //         return this
    //     },
    //     d:function(){
    //         console.log("d")
    //         return this
    //     }
    // }
    // obj.a()
    // obj.b()
    // obj.c()
    // obj.d()
    // obj.a().b().c().d()
    // obj.c().d().a().b()



    // 无法读取undefined的属性“b”
    // 无法读取null的属性“b”


</script>
</html>